<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="layui/css/layui.css" media="all" rel="stylesheet">
    <script src="layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">

    <div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">
        <form action="" class="layui-form" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">班级名：</label>
                <div class="layui-inline">
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="name" placeholder="请输入班级名"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="add" lay-submit style="margin-left: 160px;">添加</button>
            </div>
        </form>
    </div>
</div>
<script charset="utf-8" src="layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        form.on('submit(add)', function (data) {
            //向后台发送数据，验证登录信息
            $.ajax({
                url: '/class/add/' + data.field.name, //请求url
                data: '', //请求参数，类似于username=xxx&password=xxx
                type: 'post', //请求方式
                dataType: 'json', //返回值的类型
                success: function (result) {  //服务器成功返回时执行的函数
                    console.log(JSON.stringify(result));
                    if (result.code == 2000) {
                        alert("添加成功！");
                    } else {
                        alert("添加失败");
                    }
                }
            });
            return false;
        });

    });
</script>
</body>
</html>